<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true">
        <el-form-item label="检测时间">
          <el-date-picker
              v-model="searchParam.detectionTimeSearch"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss" @change="getdetectionTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检测结果">
          <el-select v-model="searchParam.result" placeholder="请选择检测结果" clearable>
            <el-option
              v-for="item in useDictionary('FileReadStatus')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
                  </el-form-item>
        <el-form-item label="数据来源">
          <el-select v-model="searchParam.dataType" placeholder="请选择数据来源" clearable>
            <el-option
              v-for="item in useDictionary('QualityDataSources')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
                  </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search"><i-ep-search />搜索</el-button>
          <el-button @click="reset"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
      </template>

      <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          border
          @selection-change="handleSelectionChange">
        <el-table-column label="测量设备M号" prop="detectionEquipCode" min-width="130" show-overflow-tooltip>
    </el-table-column>
        <el-table-column label="测量设备描述" prop="detectionEquipMemo" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="加工设备号" prop="processEquipCode" min-width="100" show-overflow-tooltip align="center">
    </el-table-column>
        <el-table-column label="特性值数量" prop="characteristicNum" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="零件编码" prop="partCode" min-width="100" show-overflow-tooltip>
    </el-table-column>
        <el-table-column label="检测类型" prop="detectionType" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="检测程序名称" prop="detectionProgramName" min-width="110" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="客户描述" prop="customMemo" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="机器名称" prop="machineCode" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="检测时间" prop="detectionTime" min-width="170" show-overflow-tooltip align="center">
    </el-table-column>
        <el-table-column label="零件二维码" prop="partQrCode" min-width="100" show-overflow-tooltip>
    </el-table-column>
        <el-table-column label="检测事件" prop="detectionEvent" min-width="100" show-overflow-tooltip>
    </el-table-column>
        <el-table-column label="数据记录号" prop="dfxDataIndex" min-width="110" show-overflow-tooltip>
    </el-table-column>
        <el-table-column label="检测结果" prop="result" min-width="100" show-overflow-tooltip align="center">
          <template #default="scope">
            <el-tag :type="scope.row.result ? 'success' : 'danger'">
              {{ scope.row.collectStatus ? '成功' : '失败' }}
            </el-tag>
          </template>
    </el-table-column>
        <el-table-column label="数据来源" prop="dataType" min-width="100" show-overflow-tooltip align="center">
          <template #default="scope">
            {{ useDictionary('QualityDataSources').find(item => item.value == scope.row.dataType)?.label }}
          </template>
    </el-table-column>
        <el-table-column label="采集时间" prop="createTime" min-width="170" show-overflow-tooltip align="center">
    </el-table-column>
      </el-table>

      <el-pagination
          :background="true"
          :current-page="pageable.pageNum"
          :page-size="pageable.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          class="mt-[20px]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script setup lang="ts">
  import { useTable,useDownload,useDictionary } from "@/utils/useTable";
  import request from "@/utils/request";

  defineOptions({
    name: "ETLQDDETECTIONDATAMAIN",
    inheritAttrs: false,
  });

  // 请求参数
  const requestApi = "/pqd-etl/qddetectiondata/queryByPage";

  // 是否需要分页
  const pagination = true;

  const initParam = {};

  // 初始化搜索参数数据
  const searchParamInit = {
    detectionTimeSearch: [],
    detectionTimeStart: "",
    detectionTimeEnd: "",
    result: "",
    dataType: "",
  };

  const deleteParam = {
    api: "/pqd-etl/qddetectiondatamain/delete",
    data: {},
  };

  // 数据请求错误后处理
  function requestError() {}

  const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

  // 表格操作 Hooks
  const {
    tableData,
    pageable,
    searchParam,
    ids,
    getTableList,
    search,
    reset,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    handleTableDelete,
    loading,
  }: any = useTable(
          requestApi,
          initParam,
          searchParamInit,
          pagination,
          dataCallBack.value,
          requestError,
          deleteParam
  );

  onMounted(() => {
    getTableList();
  });

function getdetectionTime(data: any) {
  if (data){
    searchParam.value.detectionTimeStart = data[0]
    searchParam.value.detectionTimeEnd = data[1]
  }else {
    searchParam.value.detectionTimeStart = ""
    searchParam.value.detectionTimeEnd = ""
  }
}


</script>
